<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>应用市场</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="{$CSS}/bootstrap3.3.7.min.css">
	<style type="text/css">
		html{
			min-width: 710px;
		}
		body{
			background: #f0f2f5;
		}
		/*header*/
		.material_container{
			margin: 16px;
			border: 1px solid #ebebeb;
		}
		.material_header_container{
			background: #fff;
		}
		.material_headerList_container{
			padding: 0 24px;
			font-size: 14px;
			color: rgba(0,0,0,.65);
			height: 43px;
			border-bottom: 1px solid #ebebeb;
		}
		.material_headerList_container li{
			position: relative;
			display: inline-block;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			height: 100%;
			margin: 0 18px 0 0;
			text-decoration: none;
			cursor: pointer;
			-webkit-transition: color .3s cubic-bezier(.645,.045,.355,1);
			transition: color .3s cubic-bezier(.645,.045,.355,1);
			font-size: 14px;
			color: rgba(0,0,0,.65);
		}
		.material_headerList_container span{
			display: block;
			padding: 11px 16px;
			border-bottom: 2px solid #fff;
		}
		.material_headerList_Active{
			color: #1890ff !important;
			font-weight: 500;
			border-bottom: 2px solid #1890ff !important;
		}
		.material_articleMain_container{
			background: #fff;
			padding-bottom: 20px;
		}

		/*main*/
		.material_main_container{

		}
		/*没数据*/
		.material_mainNoData_container{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 60px 0;	
		}
		.material_mainNoData_container svg{

		}
		.material_mainNoData_container p{
			font-size: 14px;
			color: rgba(0,0,0,.45);
			margin: 16px 0;
		}
		.material_mainNoData_container button{
			width: 132px;
			height: 36px;
			border-radius: 2px;
			color: #fff;
			background-color: #1890ff;
			border-color: #1890ff;
			text-shadow: 0 -1px 0 rgba(0,0,0,.12);
			-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);
			box-shadow: 0 2px 0 rgba(0,0,0,.045);
			appearance: none;
			outline: none;
			border-style: solid;
			cursor: pointer;
		}

		/*内容列表部分*/
		.material_article_container{
			padding: 16px 24px;
		}
		.material_articleTitle_container{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16px;
		}
		.material_articleTitle_container h4{
			font-size: 16px;
			color: rgba(0,0,0,.85);
			line-height: 22px;
			font-weight: bold;
		}
		.material_articleTitleSearch_container{
			display: flex;
			align-items: center;
			border: 1px solid #d9d9d9;
			height: 34px;
			padding: 4px 11px;
			color: rgba(0,0,0,.65);
			font-size: 14px;
			/*border-radius: 4px;*/
			box-sizing: border-box;
		}
		.material_articleTitleSearch_container input{
			outline: none;
			appearance: none;
			border: none;
			font-size: 14px;
			color: rgba(0,0,0,.65);
			flex:1;
		}
		.material_articleTitleSearch_container svg{
			cursor: pointer;
		}
		/*表格部分*/
		.TableInfo_container{
			display: flex;
			align-items: center;
			padding: 15px 0;
		}
		.TableInfo_container img{
			width: 60px;
			height: 60px;
		}
		.TableInfo_content{
			flex: 1;
			padding-left: 40px;
			height: 60px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			min-width: 136px;
		}
		.TableInfo_content h4{

		}
		.TableInfo_detail_container{
			display: flex;
			align-items: center;
		}
		.TableInfo_detail_container p{

		}
		.TableInfo_detail_container span{
			color: #ff5252;
			padding-left: 5px;
		}
		.TableInfo_button_container{

		}
		.TableInfo_button_container a{
			margin-right: 5px;
		}
		.paging{
           list-style:none;
           display:inline ;
           padding-left:2px    
        }
        .paging li{
            display:inline-block
        }
        .paging a{
            padding:5px 10px;
            border: 1px solid #ddd;
            margin-left: -1px;
            text-decoration: none;
        }
	</style>
</head>
<body>
	<div class="material_container">
		<!-- header（导航） -->
		<div class="material_header_container">
			<ul class="material_headerList_container">
				<li><span href="javascript::void(0)"  class="material_headerList_Active">已安装列表</span></li>
				<!-- <li><a href="#">已停用列表</a></li> -->
				<li><span onclick="location.href='notInstalledModule.html'">未安装列表({$count})</span></li>
				</ul>
			</div>
			<div class="material_articleMain_container">
				<!-- main -->
				<div class="material_main_container">
					<!-- 没数据 有数据的话是 display:flex-->
					<div class="material_mainNoData_container" style="display: none;">
						<svg t="1611651032740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7145" width="100" height="100"><path d="M831.7 369.4H193.6L64 602v290.3h897.2V602L831.7 369.4zM626.6 604.6c0 62.9-51 113.9-114 113.9s-114-51-114-113.9H117.5l103.8-198h582.5l103.8 198h-281zM502.2 131h39.1v140.6h-39.1zM236.855 200.802l27.647-27.647 99.419 99.418-27.648 27.648zM667.547 272.637l99.418-99.419 27.648 27.648-99.418 99.418z" p-id="7146" fill="#cdcdcd"></path></svg>
						<p>暂无数据</p>
					</div>
					<!-- 有数据 -->
					<div class="material_main_content">
						<!-- 内容列表部分 -->
						<div class="material_article_container">
							<div class="material_articleTitle_container">
								<div class="material_articleTitleSearch_container">
									<input type="text" name="" placeholder="请输入名称~">
									<svg t="1611651745720" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8093" width="15" height="15"><path d="M450.540923 835.421849C238.095329 835.421849 65.258028 662.585911 65.258028 450.14713 65.258028 237.711074 238.095329 64.873772 450.540923 64.873772 662.986518 64.873772 835.830632 237.711074 835.830632 450.14713 835.830632 662.584548 662.986518 835.421849 450.540923 835.421849L450.540923 835.421849ZM450.540923 159.705847C290.384053 159.705847 160.09419 289.998435 160.09419 450.14713 160.09419 610.297187 290.384053 740.591138 450.540923 740.591138 610.696431 740.591138 740.99447 610.297187 740.99447 450.14713 740.99447 289.998435 610.696431 159.705847 450.540923 159.705847L450.540923 159.705847Z" p-id="8094" fill="#d9d9d9"></path><path d="M900.538167 958.477626C885.598531 958.477626 870.668434 952.777836 859.268854 941.387795L657.978933 740.112862C635.189312 717.323242 635.189312 680.372035 657.978933 657.576963 680.77673 634.794156 717.722486 634.794156 740.518919 657.576963L941.807478 858.851896C964.598462 881.641517 964.598462 918.592724 941.807478 941.386432 930.407899 952.777836 915.477801 958.477626 900.538167 958.477626" p-id="8095" fill="#d9d9d9"></path></svg>
								</div>
								<!-- <span id="sync"><button class="layui-btn layui-btn-normal">同步已购插件</button></span> -->
								<h4></h4>
							</div>
							<!-- 表格部分 -->
							<table class="layui-table" lay-skin="line">
							  <colgroup>
							    <col>
							    <col width="180">
							    <col width="180">
							    <col width="200">
							    <col>
							  </colgroup>
							  <thead>
							    <tr>
							      <th>应用名/版本</th>
							      <th>最新版本</th>
							      <th>描述</th>
							      <th>来源</th>
							      <th>操作</th>
							    </tr> 
							  </thead>
							  <tbody>
							  	{loop $modules as $module}
							    <tr>
							      <td>
							      	<div class="TableInfo_container">
							      		{if $module['logo']}
							      		<img src="{$module['logo']}">
							      		{else}
							      		<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/a7975492d802a748ffa64418b3f571ea.png">
							      		{/if}
							      		<div class="TableInfo_content">
							      			<h4>{$module['title']}</h4>
							      			<div class="TableInfo_detail_container">
							      				<p>版本：{$module['version']}</p>

							      				<span>{if $module['can_update'] == 1}有新版本{else}最新版本{/if}</span>
							      			</div>
							      		</div>
							      	</div>
							      </td>
							      <td>{$module['new_version']}</td>
							      <td>{$module['desc']}</td>
							      <td>{$module['type'] == 1 ? '本地': '应用市场'}</td>
							      <td>
							      	<div class="TableInfo_button_container">
							      		{if $module['can_update'] == 1}
							      		<button class="layui-btn layui-btn layui-btn-radius layui-btn-normal" onclick="upgrade({$module['id']})">升级</button>
							      		{/if}
							      		<button class="layui-btn layui-btn layui-btn-radius layui-btn-danger" onclick="uninstall({$module['id']})">卸载</button>
							      	</div>
							      </td>
							    </tr>
							    {/loop}
							  </tbody>
							</table>
							
						</div>
					</div>
					<div style="margin-left: 30px;">
			            <div style="display: inline-block">
			                <span>{$p->totalnum}条/{$p->totalpage}页</span> 
			            </div>
						<ul class="paging">
			           		{P weidogsadmin}
						</ul>
			        </div>
				</div>
			</div>
		</div>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.all.js"></script>
	<script type="text/javascript">
		var relaods = "{Session::get('reload')}"
		layui.use('form', function(){
			var form = layui.form;
			// var loading = layer.load();
			//监听提交
			form.on('submit(formDemo)', function(data){
				layer.msg(JSON.stringify(data.field));
				return false;
			});

		});
	</script>
	<script type="text/javascript">
		// 点击搜索按钮
		$('.material_articleTitleSearch_container svg').click(function(){
			if(!$(this).prev().val()){
				layer.open({
				  title: '提示',
				  content: '不能为空'
				}); 
				return
			}
			console.log($(this).prev().val());
		})

		$("#sync").click(function(){
			ajax('installedModule-sync.html',{},function(res){
	        console.log(res);
	        if(res == 'ok'){
	          layer.msg('更新成功')
	          setTimeout(function(){
	            location.reload();
	          },500);
	        }else{
	         layer.msg('更新失败',!{icon: 5});
	        }
	      });
		})

		function sync(){
			if(parseInt(relaods)%2 !=0){
				var loading = layer.load();
			}
			ajax('installedModule-sync.html',{},function(res){
		        console.log(res);
		        layer.close(loading);
		        if(res == 'ok'){
		          // layer.msg('更新成功')
		          // setTimeout(function(){
		            location.reload();
		          // },500);
		        }else{
		        	layer.close(loading);
		        }

		    });
		}

		function  upgrade(id){ 
		    if(confirm('确定升级吗？')){
		      ajax('installedModule-upgrade.html',{ id:id},function(res){
		        res = JSON.parse(res);
		        if(res.status == 'success'){
		          layer.msg('升级成功') 
		          setTimeout(function(){
		            location.reload();
		          },500);
		        }else{
		         layer.msg('升级失败',!{icon: 5});
		        }
		      });
		    } 
		}

		function  uninstall(id){
		    if(confirm('确定卸载吗？')){
		      ajax('installedModule-uninstall.html',{ id:id},function(res){
		        res = JSON.parse(res);
		        if(res.status == 'success'){
		          layer.msg('卸载成功') 
		          setTimeout(function(){
		            location.reload();
		          },500);
		        }else{
		         layer.msg('卸载失败',!{icon: 5});
		        }
		      });
		    } 
		}

	</script>
	<script type="text/javascript">
		$(document).ready(function(){
			sync();
		});
	</script>
</body>
</html>